import React, { Component, PureComponent } from 'react'

export default class Test extends PureComponent {
  state = {
    msg: 'hello',
    arr: ['a'],
  }
  // 注意: 1. 在render之前执行 2. 必须有返回值, 返回true,则render执行,否则render不执行
  //   shouldComponentUpdate(nextProps, nextState) {
  //     //判断新的数据和就的数据是否相同,如果相同,返回false.不同返回true
  //     // 注意: 在其他的生命周期钩子函数中,this.state和this.props拿到的一定是最新的数据.但是shouldComponentUpdate里面this.state和this.props是旧数据.nextProps和nextState是最新的
  //     // debugger // 只要代码执行到这一行,就会暂停在这里,相当于在这里打了一个断点
  //     return (
  //       this.props.c !== nextProps.c ||
  //       this.props.obj.name !== nextProps.obj.name ||
  //       this.state.msg !== nextState.msg ||
  //       this.state.arr !== nextState.arr
  //     )
  //   }
  render() {
    console.log('test更新了')
    return (
      <div>
        Test
        <p>{this.props.c}</p>
        <p>{this.props.obj.name}</p>
        <p>{this.state.msg}</p>
        <p>{[this.state.arr]}</p>
        <button
          onClick={() => {
            this.setState({
              msg: '性能优化',
            })
          }}
        >
          修改hello
        </button>
        <button
          onClick={() => {
            const newArr = [...this.state.arr]
            newArr.push('b')
            this.setState({
              arr: newArr,
            })
          }}
        >
          修改数组
        </button>
      </div>
    )
  }
}
